<template>
    <div>
        <Card>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: left;">
                    <ButtonGroup shape="circle" size="small">
                        <Button @click="addAction">新增</Button>
                        <Button @click="refreshAction">刷新</Button>
                    </ButtonGroup>
                </div>
                <div style="float: right;">
                    <Page :total="totalCount" :current="pageIndex" :page-size="pageSize" @on-change="onChangePage" size="small" show-total show-elevator></Page>
                </div>
            </div>
            <Table :data="tableData" :columns="columns" :loading="loading" size="small" :stripe="stripe"></Table>
        </Card>

        <Modal
                :title="modalTitle"
                v-model="modalShow"
                :mask-closable="false"
                :closable="false"
                :footer-hide="true"
                scrollable
                class-name="vertical-center-modal">
            <Form :ref="formRef" :model="formData" label-position="right" :rules="formValidateRule" :label-width="100">
                <input v-model="formData.clientId" name="clientId" type="hidden">
                <FormItem label="应用名称" prop="clientName">
                    <Input v-model="formData.clientName" name="clientName" placeholder="应用名称"></Input>
                </FormItem>
                <FormItem label="clientSecret" prop="clientSecret">
                    <Input v-model="formData.clientSecret" name="clientSecret" placeholder="clientSecret"></Input>
                </FormItem>
                <FormItem label="应用首页" prop="webHomeUrl">
                    <Input v-model="formData.webHomeUrl" name="webHomeUrl" placeholder="应用首页"></Input>
                </FormItem>
                <FormItem label="应用类型">
                    <RadioGroup v-model="formData.clientType">
                        <Radio label="2">第三方应用</Radio>
                        <Radio label="1">子应用</Radio>
                        <Radio label="0">系统应用</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="可信应用">
                    <RadioGroup v-model="formData.autoApprove">
                        <Radio label="true">是</Radio>
                        <Radio label="false">否</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="授权模式">
                    <CheckboxGroup v-model="formData.authorizedGrantTypes">
                        <Checkbox label="authorization_code"></Checkbox>
                        <Checkbox label="implicit"></Checkbox>
                        <Checkbox label="password"></Checkbox>
                        <Checkbox label="refresh_token"></Checkbox>
                    </CheckboxGroup>
                </FormItem>
                <FormItem>
                    <div style="float: right;">
                        <Button style="margin-right: 10px" @click="formCancelHandle">取消</Button>
                        <Button type="primary" @click="formSaveHandle">保存</Button>
                    </div>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>